<template>

	<view class="my-bar">
		<!-- 状态栏 -->
		<view class="status-bar" :style="{height:  statusbarH + 'px', 'background-color': statusBarColor}"></view>

		<!-- 导航条 -->
		<view class="nav-bar" :style="{height: navBarH + 'px', 'background-color': navBarColor}">

			<!-- 底部  真正的居中标题显示 -->
			<view class="nav-body nav-bottom" :style="{color: titleColor}"> {{ title }} </view>

			<view class="nav-body nav-top">

				<!-- 左侧 返回按钮 -->
				<view class="nav-left" v-if="showBack" @tap="backTap">
					<slot name="left">
						<image class="back-img" :src="backIcon" mode=""></image>
					</slot>
				</view>

				<!-- 自适应占位视图 -->
				<view class="nav-center">

				</view>

				<!-- 右侧    wxrMargin:微信小程序 胶囊按钮所占位置-->
				<view class="nav-right" :style="{'margin-right': wxrMargin + 'px'}">
					<slot name="right">

					</slot>
				</view>

			</view>
		</view>

	</view>

</template>


<script>
	import navBarUtils from '../utils/navBarUtils'

	/**
	 * 1.H5：导航栏高度可以设为44px，它没有状态栏，因为H5端运行在浏览器中，浏览器已经处理了安全区；
		总高度 = 44px

		2.App：导航栏高度也是44px，它的状态栏高度是不一定的，每个机型的安全区是不一样尺寸，所以获取安全区高度来计算。
		总高度 = 安全区高度 + 44px

		3.微信小程序：导航栏高度和状态栏高度都与机型的尺寸有关，其中状态栏高度需要获取安全区高度来计算，导航栏高度需要获取小程序右上角的“胶囊”高度和top值来计算。
		总高度 = 安全区高度 + 导航栏高度
		导航栏高度 = 胶囊高度 + 上间距 + 下间距
		上间距 = 下间距 =  胶囊.top - 状态栏高度
		即：总高度 = 状态栏高度 + （胶囊高度 + （胶囊.top - 状态栏高度）*2）

	 */
	export default {

		props: {

			title: {
				type: String,
				default: '标题'
			},

			titleColor: {
				type: String,
				default: '#000'
			},

			navBarColor: {
				type: String,
				default: '#fff'
			},

			statusBarColor: {
				type: String,
				default: '#fff'
			},

			showBack: {
				type: Boolean,
				default: true
			}

		},

		data() {
			return {
				// 状态栏高度  H5获取不到状态栏高度 默认为40px， 非H5则使用获取到的状态栏高度
				statusbarH: 40,
				// 导航栏高度  H5默认为44px， 非H5则使用获取计算后的导航栏高度
				navBarH: 44,
				// 微信胶囊按钮宽度
				wxrMargin: 0,

				backIcon: "/static/navigationBar/nav_back_black.png"

			}
		},

		mounted() {
			// console.log('+++ 自定义导航条加载完成')

			let statusBarH = navBarUtils.geStatusBarHeight()
			// console.log('++++ statusBarH = ', statusBarH)
			this.statusbarH = statusBarH

			let navH = navBarUtils.getNavBarHeight()
			// console.log('++++ navH = ', navH)
			this.navbarHeight = navH

			let rightMargin = navBarUtils.getMenuButtonLeft()
			this.wxrMargin = rightMargin
			// console.log('++++ wxrMargin = ', this.wxrMargin)

		},

		watch: {
			titleColor: {
				handler(newValue, oldValue) {
					if (newValue == "#fff" || newValue == "#ffffff" || newValue == "white" || newValue == "#FFF" ||
						newValue == "#FFFFFF") {
						// console.log('++++ 白色')
						this.backIcon = '/static/navigationBar/nav_back_white.png'
					}
				},
				immediate: true
			}
		},

		methods: {

			backTap() {
				this.$emit("backTap")
			},


		}
	}
</script>

<style lang="scss" scoped>
	.my-bar {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
	}

	.status-bar {
		background-color: #fff;
	}

	.nav-bar {
		position: relative;
		// height: 80rpx;
		// border: 1px solid blue;

		.nav-body {
			width: 100%;
			height: 100%;
		}

		.nav-bottom {
			// background-color: lightcyan;

			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 34rpx;
			font-weight: 400;
		}

		.nav-top {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;

			// background-color: #127cf9;
			// background-color: transparent;

			// border: 3px solid cyan;

			display: flex;
			align-items: center;
			justify-content: space-between;

			.nav-left {
				// 垂直居中 水平居左
				display: flex;
				align-items: center;
				justify-content: start;

				// 禁止收缩
				flex-shrink: 0;
				height: 100%;
				// background-color: yellowgreen;

				.back-img {
					width: 34rpx;
					height: 34rpx;
					padding: 16rpx;
					// border: 3px solid red;
				}
			}

			.nav-center {
				// 垂直居中 水平居中
				display: flex;
				align-items: center;
				justify-content: center;

				// 自适应空间
				flex-grow: 1;
				margin: 0 10rpx;
				height: 100%;
				background-color: transparent;

				// border: 3px solid pink;

			}

			.nav-right {
				// 垂直居中 水平居右
				display: flex;
				align-items: center;
				justify-content: end;

				// 禁止收缩
				flex-shrink: 0;
				height: 100%;
				// background-color: pink;

				// border: 3px solid orange;
			}


		}



	}
</style>